<template>
    <view class="card-container" :style="{ ...customStyle, padding: pad, width: width }" :class="customClass">
        <view class="card-content" :class="contentClass"><slot></slot></view>
        <view class="card-bg card-b"></view>
        <view class="card-bg3 card-b"></view>
        <view class="card-bg4 card-b" v-if="bgFilter === true"></view>
    </view>
</template>

<script>
export default {
    name: 'Acard',
    props: ['customStyle', 'customClass', 'pad', 'contentClass', 'bgFilter', 'width'],
    data() {
        return {};
    }
};
</script>

<style lang="scss" scoped>
.card {
    &-content {
        position: relative;
        z-index: 5;
        font-size: 14px;
        font-weight: 300;
        font-family: 'Oxanium-Bold', 'Microsoft YaHei', 'PingFang SC' !important;
        color: #ffffff;
    }
    &-container {
        overflow: hidden;
        position: relative;
        width: 100%;
        padding: 20px 15px;
    }
    &-b {
        overflow: hidden;
        clip-path: polygon(
            10px 0px,
        	   calc(100% - 10px) 0,
        	   100% 10px,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            10px 100%,
            0 calc(100% - 10px),
            0 10px
        );
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        opacity: 0.8;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        border: solid 1px rgba(255, 255, 255, 1);
    }
    &-bg {
        background: linear-gradient(-45deg, rgba(255, 255, 255, 1) 7px, transparent 0) bottom right,
            linear-gradient(45deg, rgba(255, 255, 255, 1) 7px, transparent 0) bottom left,
            linear-gradient(135deg, rgba(255, 255, 255, 1) 7px, transparent 0) top left,
            linear-gradient(-135deg, rgba(255, 255, 255, 1) 7px, transparent 0) top right;
    }
    &-bg3 {
        clip-path: polygon(
            15px 0px,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px
        );
        background: linear-gradient(-45deg, rgba(255, 255, 255, 1) 10px, transparent 0) bottom right,
            linear-gradient(45deg, rgba(255, 255, 255, 1) 10px, transparent 0) bottom left,
            linear-gradient(135deg, rgba(255, 255, 255, 1) 10px, transparent 0) top left,
            linear-gradient(-135deg, rgba(255, 255, 255, 1) 10px, transparent 0) top right;
        &:active {
            background: linear-gradient(-45deg, #3ffaac 10px, transparent 0) bottom right,
                linear-gradient(45deg, #3ffaac 10px, transparent 0) bottom left,
                linear-gradient(135deg, #3ffaac 10px, transparent 0) top left,
                linear-gradient(-135deg, #3ffaac 10px, transparent 0) top right;
        }
        &:hover {
            background: linear-gradient(-45deg, #3ffaac 10px, transparent 0) bottom right,
                linear-gradient(45deg, #3ffaac 10px, transparent 0) bottom left,
                linear-gradient(135deg, #3ffaac 10px, transparent 0) top left,
                linear-gradient(-135deg, #3ffaac 10px, transparent 0) top right;
        }
    }

    &-bg4 {
        background: linear-gradient(-45deg, transparent 10px, #666 0) bottom right,
            linear-gradient(45deg, transparent 10px, #666 0) bottom left,
            linear-gradient(-135deg, transparent 10px, #666 0) top right,
            linear-gradient(135deg, transparent 10px, #666 0) top left;
        background-size: 51% 51%;
        border: none;
        opacity: 0.5;
    }
}
</style>
